/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

    // Initialisation de variables globales au script

    // Initialisation des indicateurs de bonnes réponses à donner pour chaque environnement
    // Format des réponse : Array['forme','largeur','hauteur']
    var tab_bonnes_reponses_e1 = Array('square','200','200');
    var tab_bonnes_reponses_e2 = Array('circle','200','200');
    var tab_bonnes_reponses_e3 = Array('circle','150','50');
    var tab_bonnes_reponses_e4 = Array('square','100','200');

    // activation du bouton_check
    btn_check_actif = false;


    // Initialisation de l'indicateur d'environnement (ou niveau) dans lequel se trouve l'utilisateur
    // Au début : environnement/niveau 1
    // Cette variable est mise à jour au moment du changement d'environnement, lors de l'appel AJAX
    var environment = 1;
    
    // Initialisation des variables utilisées pour gérer le compteur de temps
    var timer_width = 0;
    var animating = false;


    // Au lancement de l'environnement 1 du jeu 1
    $(document).ready(function(){
        // Fonction permettant de continuer à bénéficier des propriétés JQuery écrites dans ce script malgré un rechargement AJAX des nouveaux environnements
        load_jquery_properties();
    });
    
    // Fonction permettant de continuer à bénéficier des propriétés JQuery écrites dans ce script malgré un rechargement AJAX des nouveaux environnements
    function load_jquery_properties(){
        
        btn_check_actif = false;
        
        // Gestion du compteur de temps
        animating = false;
        // Fonction exécutée à intervales de temps réguliers
        window.setInterval(function() {

            if(animating == false){
                // Si la taille a atteint son maximum
                if(timer_width < 450){

                    animating = true;
                    if(timer_width < 150){
                        $('#timing').css('background-color','#00FF00');
                    }
                    if((timer_width > 150) && (timer_width < 300)){
                        $('#timing').css('background-color','#FF6600');
                    }
                    if(timer_width > 300){
                        $('#timing').css('background-color','#FF0000');
                    }

                    $('#timing').animate({
                        width: "+=5px"
                        //$('#timing').delay(200).fadeIn('slow');delay(200)
                    }, 400, function(){
                        animating = false;
                    });
                    timer_width = timer_width+5;
                }
            }

        }, 400);
        

        // Chargement des paramètres de la librairie de gestion des couleurs "farbtastic.js"
        $('#picker').farbtastic('#color');

        // Initialisation de l'indicateur du nombre de bonnes réponses données par l'utilisateur
        var tab_bonnes_reponses_user = Array('','','');
        var tab_bonnes_reponses_environment = Array();

        // On mémorise le nombre de bonnes réponses à donner en fonction de l'environnement
        switch(environment){
            case 1:
                tab_bonnes_reponses_environment = tab_bonnes_reponses_e1;
            break;
            case 2:
                tab_bonnes_reponses_environment = tab_bonnes_reponses_e2;
            break;
            case 3:
                tab_bonnes_reponses_environment = tab_bonnes_reponses_e3;
            break;
            case 4:
                tab_bonnes_reponses_environment = tab_bonnes_reponses_e4;
            break;
        }

        // Initialisation des coordonnées de position de l'img_wip :
        var top_tmp = $("#img_wip").css('top');
        var left_tmp = $("#img_wip").css('left');

        // SI on se situe dans les environnements 3 ou 4
        if((environment == 3) || (environment == 4)){
            // on prévoit une gestion des couleurs complète
            $('.sl-marker').css('display','block');
            $('.overlay').css('display','block');
            $('.color').css('display','block');
            $('#overlay_tmp').css('display','none');
            $('.wheel').css('background','url("../../assets/images/game3/wheel_env_3_4.png")');
        }


        // On charge l'écran en fondu
        $('#content').fadeIn(1000);

        // Au clic sur le bouton 'replay', on recharge la page pour recommencer le jeu
        $('#btn_replay').click(function(){
            $('#content').css('display', 'none');
            location.reload();
        });


        // Ajout d'une classe adéquate à notre 'img_wip' en fonction de la forme cliquée

        // Au clic sur le carré
        $('#btn_square_form').click(function(){
            $('#img_btn_check').attr('src','../../assets/images/game3/btn_check_ok.png');
            btn_check_actif = true;
            // Si img_wip a déjà la classe "circle_wip" affectée
            if($("#img_wip").attr('class') == 'circle_wip'){
                //on fait disparaitre l'élément
                $("#img_wip").effect("explode", 600, function(){
                //$("#img_wip").fadeOut('slow', function(){
                    //On supprime la classe "circle_wip"
                    $("#img_wip").removeClass('circle_wip');
                    // On réinitialise la taille de l'élément
                    $("#img_wip").css('height', '100px');
                    $("#img_wip").css('width', '100px');
                    // On réinitialise la position de l'élément
                    $("#img_wip").css('top', top_tmp);
                    $("#img_wip").css('left', left_tmp);
                    // On met une couleur de fond blanche
                    // Annulation suite à demande ergo : 27/03/12
                    //$("#img_wip").css('background-color', '#FFFFFF');
                    // On ajoute la classe "square_wip"
                    $("#img_wip").addClass('square_wip');
                    $('#img_wip').delay(200).fadeIn('slow');
                });
            }
            // Sinon
            else{
                // Si la classe "square_wip" n'est pas déjà affectée
                if($("#img_wip").attr('class') != 'square_wip'){
                    $("#img_wip").addClass("square_wip");
                    $('#img_wip').fadeIn('slow');
                }
            }
        });
        
        // Au clic sur le cercle
        $('#btn_circle_form').click(function(){
            $('#img_btn_check').attr('src','../../assets/images/game3/btn_check_ok.png');
            btn_check_actif = true;
            // Si img_wip a déjà la classe "square_wip" affectée
            if($("#img_wip").attr('class') == 'square_wip'){
                //on fait disparaitre l'élément
                $("#img_wip").effect("explode", 600, function(){
                //$("#img_wip").fadeOut('slow', function(){
                    //On supprime la classe "square_wip"
                    $("#img_wip").removeClass('square_wip');
                    // On réinitialise la taille de l'élément
                    $("#img_wip").css('height', '100px');
                    $("#img_wip").css('width', '100px');
                    // On réinitialise la position de l'élément
                    $("#img_wip").css('top', top_tmp);
                    $("#img_wip").css('left', left_tmp);
                    // On met une couleur de fond blanche
                    // Annulation suite à demande ergo : 27/03/12
                    //$("#img_wip").css('background-color', '#FFFFFF');
                    // On ajoute la classe "circle_wip"
                    $("#img_wip").addClass('circle_wip');
                    $('#img_wip').delay(200).fadeIn('slow');
                });
            }
            // Sinon
            else{
                // Si la classe "square_wip" n'est pas déjà affectée
                if($("#img_wip").attr('class') != 'circle_wip'){
                    $("#img_wip").addClass("circle_wip");
                    $('#img_wip').fadeIn('slow');
                }
            }
        });


        // Gestion des animations de changement de taille, au clic de l'utilisateur

        // Agrandissement de la largeur
        $('#btn_grow_width').click(function(){
            var width = parseInt($("#img_wip").css('width').substring(0, $("#img_wip").css('width').length-2));
            if( width < '250'){
                $("#img_wip").animate({
                    width: "+=50px",
                    left: "-=25px"
                }, 500 );
            }
        });

        // Agrandissement de la hauteur
        $('#btn_grow_height').click(function(){
            var height = parseInt($("#img_wip").css('height').substring(0, $("#img_wip").css('height').length-2));
            if( height < '250'){
                $("#img_wip").animate({
                    height: "+=50px",
                    top: "-=25px"
                }, 500 );
            }
        });

        // Rétrécissement de la largeur
        $('#btn_reduce_width').click(function(){
            var width = parseInt($("#img_wip").css('width').substring(0, $("#img_wip").css('width').length-2));
            if( width >= '50'){
                $("#img_wip").animate({
                    width: "-=50px",
                    left: "+=25px"
                }, 500 );
            }
        });

        // Rétrécissement de la hauteur
        $('#btn_reduce_height').click(function(){
            var height = parseInt($("#img_wip").css('height').substring(0, $("#img_wip").css('height').length-2));
            if( height >= '50'){
                $("#img_wip").animate({
                    height: "-=50px",
                    top: "+=25px"
                }, 500 );
            }
        });


        // Gestion de la coloration de notre "img_wip"
        $("#color_management").mouseover(function(){
            if($("#img_wip").css('display') == 'block'){
                if($("#img_wip").is('.square_wip')){
                    $("#color").attr('class','square_wip');
                }
                if($("#img_wip").is('.circle_wip')){
                    $("#color").attr('class','circle_wip');
                }
                var my_height = $("#img_wip").height()+8+'px';
                var my_width = $("#img_wip").width()+8+'px';
                var my_top = $("#img_wip").position().top;
                var my_left = $("#img_wip").position().left;
                var my_color = $("#img_wip").css('background-color');
                $("#color").css('height', my_height);
                $("#color").css('width', my_width);
                $("#color").css('top', my_top);
                $("#color").css('left', my_left);
                $("#color").css('background-color', my_color);

                $("#color").css('display','block');
            }
        });

        $("#color_management").mouseout(function(){
            if($("#img_wip").css('display') == 'block'){
                $("#color").removeAttr('class','square_wip');
                $("#color").css('display','none');
                var backgroundCol = $("#color").css('background-color');
                $("#img_wip").css('background-color', backgroundCol);
            }
        });


        // Controle des résultats au clic sur le bouton 'btn_check'
        $('#btn_check').click(function(){

            if(btn_check_actif){

                // On récupère le nom de la forme grâce à la classe associée à img_wip
                if($("#img_wip").attr('class') == 'square_wip'){
                    tab_bonnes_reponses_user[0] = 'square';
                }
                else{
                    tab_bonnes_reponses_user[0] = 'circle';
                }

                // Récupération de la largeur
                tab_bonnes_reponses_user[1] = $("#img_wip").css('width');
                tab_bonnes_reponses_user[1] = parseInt(tab_bonnes_reponses_user[1].substring(0, tab_bonnes_reponses_user[1].length-2));

                // Récupération de la hauteur
                tab_bonnes_reponses_user[2] = $("#img_wip").css('height');
                tab_bonnes_reponses_user[2] = parseInt(tab_bonnes_reponses_user[2].substring(0, tab_bonnes_reponses_user[2].length-2));


                // On récupère la couleur de fond de "img_wip"
                var img_wip_color = $("#img_wip").css("background-color");
                //tab_bonnes_reponses_user[1] = color;

                // Séparation de la valeur obtenue en r,g,b pour une transformation en hexa
                var tab_split_wip=img_wip_color.split(',');
                var r_wip = tab_split_wip[0].substring(4,tab_split_wip[0].length);
                var g_wip = tab_split_wip[1];
                var b_wip = tab_split_wip[2].substring(0, tab_split_wip[2].length-1);

                var rgb_tab_wip = Array(r_wip,g_wip,b_wip);
                var max_rgb_tab_wip = Array(0,0,0);
                var min_rgb_tab_wip = Array(0,0,0);


                // Création des tableaux de valeurs min et valeurs max de comparaison de couleurs
                var degre_erreur = 30;

                for(i=0;i<rgb_tab_wip.length;i++){
                    if((255 - rgb_tab_wip[i]) < degre_erreur ){
                        max_rgb_tab_wip[i] = 255;
                    }
                    else{
                        max_rgb_tab_wip[i] = parseInt(rgb_tab_wip[i]) + parseInt(degre_erreur);
                    }
                    if((rgb_tab_wip[i]) < degre_erreur ){
                        max_rgb_tab_wip[i] = 0;
                    }
                    else{
                        min_rgb_tab_wip[i] = parseInt(rgb_tab_wip[i]) - parseInt(degre_erreur);
                    }
                }

                var img_to_reproduce_color = '';
                // On récupère la couleur de fond de "img_to_reproduce"
                switch(environment){
                    case 1:
                        img_to_reproduce_color = $('#mr_pixou').css('background-color')

                        // Séparation de la valeur de "img_to_reproduce" en r,g,b
                        var tab_split_goal =img_to_reproduce_color.split(',');
                        var r_goal = tab_split_goal[0].substring(4,tab_split_goal[0].length);
                        var g_goal = tab_split_goal[1];
                        var b_goal = tab_split_goal[2].substring(0, tab_split_goal[2].length-1);

                        var rgb_tab_goal = Array(r_goal,g_goal,b_goal);

                        var color_ok = true;
                        for(i=0;i<rgb_tab_goal.length;i++){
                            if((min_rgb_tab_wip[i] > rgb_tab_goal[i]) || (max_rgb_tab_wip[i] < rgb_tab_goal[i]) )
                                color_ok = false;
                        }

                    break;
                    case 2:
                        img_to_reproduce_color = $('#mme_pixou').css('background-color')

                        // Séparation de la valeur de "img_to_reproduce" en r,g,b
                        var tab_split_goal =img_to_reproduce_color.split(',');
                        var r_goal = tab_split_goal[0].substring(4,tab_split_goal[0].length);
                        var g_goal = tab_split_goal[1];
                        var b_goal = tab_split_goal[2].substring(0, tab_split_goal[2].length-1);

                        var rgb_tab_goal = Array(r_goal,g_goal,b_goal);

                        var color_ok = true;
                        for(i=0;i<rgb_tab_goal.length;i++){
                            if((min_rgb_tab_wip[i] > rgb_tab_goal[i]) || (max_rgb_tab_wip[i] < rgb_tab_goal[i]) )
                                color_ok = false;
                        }
                    break;
                    case 3:
                        img_to_reproduce_color = $('#pixette').css('background-color')

                        // Séparation de la valeur de "img_to_reproduce" en r,g,b
                        var tab_split_goal =img_to_reproduce_color.split(',');
                        var r_goal = tab_split_goal[0].substring(4,tab_split_goal[0].length);
                        var g_goal = tab_split_goal[1];
                        var b_goal = tab_split_goal[2].substring(0, tab_split_goal[2].length-1);

                        var rgb_tab_goal = Array(r_goal,g_goal,b_goal);

                        var color_ok = true;
                        for(i=0;i<rgb_tab_goal.length;i++){
                            if((min_rgb_tab_wip[i] > rgb_tab_goal[i]) || (max_rgb_tab_wip[i] < rgb_tab_goal[i]) )
                                color_ok = false;
                        }
                    break;
                    case 4:
                        img_to_reproduce_color = $('#pixouf').css('background-color')

                        // Séparation de la valeur de "img_to_reproduce" en r,g,b
                        var tab_split_goal =img_to_reproduce_color.split(',');
                        var r_goal = tab_split_goal[0].substring(4,tab_split_goal[0].length);
                        var g_goal = tab_split_goal[1];
                        var b_goal = tab_split_goal[2].substring(0, tab_split_goal[2].length-1);

                        var rgb_tab_goal = Array(r_goal,g_goal,b_goal);

                        var color_ok = true;
                        for(i=0;i<rgb_tab_goal.length;i++){
                            if((min_rgb_tab_wip[i] > rgb_tab_goal[i]) || (max_rgb_tab_wip[i] < rgb_tab_goal[i]) )
                                color_ok = false;
                        }
                    break;
                }


                //1. on compare le tableau de résultats avec le tableau de l'utilisateur
                var reponses_ok = true;
                for(i=0;i<tab_bonnes_reponses_user.length;i++){
                    // On évite les comparaisons de couleurs faites auparavant
                    if(tab_bonnes_reponses_user[i] != tab_bonnes_reponses_environment[i])
                        reponses_ok = false;
                }

                // SI les tableaux sont identiques
                if((reponses_ok) && (color_ok)){

                    // On décrémente la jauge de temps
                    animating = true;
                        if(timer_width-30 < 0){
                            var tmp = timer_width-30;
                            tmp = 30 + tmp;
                            $('#timing').animate({
                                width: "-="+tmp+"px"
                            }, 100, function(){
                                timer_width = 0;
                                animating = false;
                            });
                        }
                        else{
                            $('#timing').animate({
                                width: "-=30px"
                            }, 100, function(){
                                timer_width = timer_width-30;
                                animating = false;
                            });
                        }

                    // Lancement d'une mini-animation de transition'
                    // .../... RAF, intégration d'un petit son de succès...
                   // $('#zone_interaction').fadeOut(600, function(){

                    // Incrémentation de l'indicateur d'environnement/niveau
                    environment++;

                    // Si on a fini l'environnement 4, le jeu est terminé
                    if(environment > 4){
                        $('#zone_interaction').animate({
                                opacity: "-=0.3"
                        });
                        $('#zone_basse').animate({
                            opacity: "-=0.3"
                        });
                        $('#end_game').fadeIn(800,function(){
                            $('#zone_interaction').delay(500).fadeOut(1000);
                            $(this).delay(500).fadeOut(1000);
                        });

                        $('#zone_basse').delay(1500).fadeOut(600, function(){

                            // On transmet la valeur du timer au controleur pour calculer le score
                            var data_result = {
                                    timer : timer_width
                                    };
                            // Appel de la méthode Ajax de JQuery, pour transmettre nos données à notre controleur 
                            $.ajax({
                                // url vers la méthode de chargement du nouvel environnement
                                url: 'endGame',
                                // Action de transmission des données (ici, on choisit 'POST', comme pour le formulaire)
                                type: 'POST',
                                // Protocole de communication avec le controleur (ici, on attend son retour avant de traiter la fonction de callback)
                                async : false,
                                // Données à transmettre et mises en forme précédemment
                                data: data_result,
                                success: function(msg) { // En cas de succès, on exécute ce qui suit (fonction de callback)
                                    // Insertion de la vue du nouvel environnement chargée par le controleur
                                    $('#content').html(msg);
                                    // Apparition progressive du nouvel environnement et lancement de la fonction de...
                                    $('#zone_result').fadeIn(2000);
                                }
                            });
                        });
                    }
                    else{
                        $('#zone_interaction').fadeOut(600, function(){
                            // Chargement AJAX du nouvel environnement
                            var data_test = {
                                    ajax : '1',
                                    environment : environment
                                    };

                                // Appel de la méthode Ajax de JQuery, pour transmettre nos données à notre controleur 
                                $.ajax({
                                    // url vers la méthode de chargement du nouvel environnement
                                    url: 'loadNewEnvironment',
                                    // Action de transmission des données (ici, on choisit 'POST', comme pour le formulaire)
                                    type: 'POST',
                                    // Protocole de communication avec le controleur (ici, on attend son retour avant de traiter la fonction de callback)
                                    async : false,
                                    // Données à transmettre et mises en forme précédemment
                                    data: data_test,
                                    success: function(msg) { // En cas de succès, on exécute ce qui suit (fonction de callback)
                                        // Insertion de la vue du nouvel environnement chargée par le controleur
                                        $('#zone_interaction').html(msg);

                                        // Apparition progressive du nouvel environnement et lancement de la fonction de...
                                        $('#zone_interaction').fadeIn(600, function(){
                                            // On rend draggable les items du nouvel environnement
                                            $('.item_draggable').draggable({disabled: false});

                                            // Fonction permettant de continuer à bénéficier des propriétés JQuery écrites dans ce script malgré un rechargement AJAX
                                            load_jquery_properties();
                                        });
                                    }
                                });
                        });
                    }

                }
                // SINON
                else{
                    //  2b. On indique qu'il y a une ou des erreurs et on continue l'animation
                    //  3b. On incrémente la jauge de temps
                    animating = true;
                    if((timer_width+30) < 450){
                        $('#timing').animate({
                            width: "+=30px"
                        }, 100, function(){
                            timer_width = timer_width+30;
                            animating = false;
                        });
                    }
                }
            }
        });


        function rgbToHex(R,G,B){
            return toHex(R)+toHex(G)+toHex(B)
        }
        function toHex(n){
            n = parseInt(n,10);
            if (isNaN(n)) return "00";
            n = Math.max(0,Math.min(n,255));
            return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16);
        }

    }
    
    function replay_game(){
            $('#content').fadeOut(500, function(){
                window.location.href = 'index';
            });
        }

        function save_result(medal, game_id){

            var data_result = {
                medal : medal
                };

            $.ajax({
                // url vers la méthode de chargement du nouvel environnement
                url: 'saveResult',
                // Action de transmission des données (ici, on choisit 'POST', comme pour le formulaire)
                type: 'POST',
                // Protocole de communication avec le controleur (ici, on attend son retour avant de traiter la fonction de callback)
                async : false,
                // Données à transmettre et mises en forme précédemment
                data: data_result,
                success: function(msg) { // En cas de succès, on exécute ce qui suit (fonction de callback)
                    // Insertion de la vue du nouvel environnement chargée par le controleur
                    //$('#controller_callback').html(msg);
                    // Apparition progressive du nouvel environnement et lancement de la fonction de...
                    //$('#controller_callback').fadeIn(2000, function(){
                        $('#content').fadeOut(2000, function(){
                            window.location.href = '../home/index';
                        });
                    //});
                }
            });
        }

